<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.prod.js"></script>
</head>
<body>
<div id="app1" class="p-4 max-w-xl mx-auto">
    <h1 class="text-xl font-bold mb-4">🤖 智能客服</h1>
    <div v-for="(msg, index) in messages" :key="index" class="mb-2 bg-gray-100 p-2 rounded-xl">
        {{ msg }}
    </div>
</div>
<div id="app2" class="p-4 max-w-xl mx-auto">
    <h1 class="text-xl font-bold mb-4">🤖 智能客服</h1>
    <span v-for="(msg, index) in messages" :key="index" class="mb-2 bg-gray-100 p-2 rounded-xl">
        {{ msg }}
    </span>
</div>
<script>
    const { ref, onMounted, onUnmounted,createApp } = Vue
    createApp({
        setup(){
            const messages = ref([])
            let eventSource = null
            onMounted(() => {
                eventSource = new EventSource('/sse/chat')

                eventSource.onmessage = (event) => {
                    messages.value.push(event.data)
                }

                eventSource.onerror = (err) => {
                    console.error('连接出错', err)
                    eventSource.close()
                }
            })

            onUnmounted(() => {
                if (eventSource) {
                    eventSource.close()
                }
            })
            return {messages}
        }
    }).mount("#app1")

    createApp({
        setup(){
            const messages = ref([])
            let eventSource = null
            onMounted(() => {
                eventSource = new EventSource('/sse/chat2')

                eventSource.onmessage = (event) => {
                    messages.value.push(event.data)
                }

                eventSource.onerror = (err) => {
                    console.error('连接出错', err)
                    eventSource.close()
                }
            })

            onUnmounted(() => {
                if (eventSource) {
                    eventSource.close()
                }
            })
            return {messages}
        }
    }).mount("#app2")

</script>
</body>
</html>